import React from 'react';
import webGlControl from './control';

interface ViewProps extends React.HTMLAttributes<HTMLSpanElement> {}
interface States {
  showing: boolean;
}
export default class PointsBg extends React.Component<ViewProps, States> {
  public state: States = {
    showing: false,
  };
  public componentDidMount() {
    webGlControl.init('three-comp-points-bg');
  }
  public componentWillUnmount() {
    webGlControl.destroy();
  }
  public render() {
    const { children, ...restProps } = this.props;
    const { showing } = this.state;
    return (
      <div
        id="three-comp-points-bg"
        style={{ width: '100%', height: '800px', opacity: showing ? 1 : 0 }}
      />
    );
  }

  public startPlay = () => {
    this.setState({ showing: true });
    webGlControl.restartAnimate();
    webGlControl.toggleTween(0);
  };
  public stopPlay = () => {
    webGlControl.toggleTween(-2000, () => {
      webGlControl.stopAnimate();
      this.setState({ showing: false });
    });
  };
}
